<template>
  <div id="slides-show">
    <div class="text-align-center m-b-30 " v-if="slidesShowList.length == 0">
      <h1>暂无轮播图</h1>
    </div>
    <div v-else>
      <el-card v-for="(item, index) in slidesShowList" :key="index" class="m-b-30" shadow="hover" :body-style="{ padding: '20px'}">
        <div slot="header">
          <h3>
            轮播名称: {{item.name}}
            <span class="float-r">
              <el-button class="p-0" type="text" @click="deleteById(item)">删除</el-button>
            </span>
          </h3>
        </div>
        <div class="i-b w-740 h-300">
          <el-image
            style="width: 740px; height: 300px"
            :src="item.imgUrl"
            fit="cover"></el-image>
        </div>
        <div class="i-b m-l-20 slidesInfo" style="width:30%;">
          <h3 class="m-b-28">关联文章标题:</h3>
          <h3 class="m-b-40">{{item.articleTitle}}</h3>
          <h3 class="m-b-28">关联文章ID:</h3>
          <h3 class="">{{item.articleId}}</h3>
        </div>
      </el-card>
    </div>
    <div><el-button class="W100 m-t-20" type="primary" @click="isAdd = true">添加轮播图</el-button></div>
    <el-dialog
      title="添加轮播"
      :visible.sync="isAdd"
      width="780px">
      <div class="m-b-20">
        <el-input class="m-b-10" v-model="slidesShowFrom.name" placeholder="输入轮播图名称"></el-input>
        <el-input class="m-b-10" v-model="slidesShowFrom.articleTitle" placeholder="关联文章标题"></el-input>
        <el-input v-model="slidesShowFrom.articleId" placeholder="关联文章ID"></el-input>
      </div>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:3000/admin/uploadSlidesShowImage"
        :show-file-list="false"
        :on-success="handleAvatarSuccess">
        <el-image
          v-if="slidesShowFrom.imgUrl"
          style="width: 740px; height: 300px"
          :src="slidesShowFrom.imgUrl"
          fit="cover"></el-image>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer">
        <el-button @click="isAdd = false">取 消</el-button>
        <el-button type="primary" @click="addSlideShow">确 定</el-button>
      </span>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      slidesShowList: [],
      slidesShowFrom: {
        name: '',
        imgUrl: '',
        articleId: '',
        articleTitle: ''
      },
      isAdd: false,
      imageUrl: ''
    }
  },
  created() {
    this.getSlideShowList()
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.slidesShowFrom.imgUrl = res.data.address
    },
    addSlideShow() {
      this.$confirm('是否添加轮播', '标题', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async (action) => {
          if(action=='confirm') {
            let res = await this.api.post('/admin/setSlidesShow', {
              ...this.slidesShowFrom
            })
            if(res.code == 0) {
              this.getSlideShowList()
              this.isAdd = false
              this.slidesShowFrom.name = ''
              this.slidesShowFrom.imgUrl = ''
              this.slidesShowFrom.articleId = ''
              this.slidesShowFrom.articleTitle = ''
            }
            else this.$message({ message: res.message, type: 'info', showClose: true, });
          }else {
            return false
          }
        }
      })
      
    },
    async getSlideShowList() {
      let res = await this.api.get('/getSlidesShowList')
        if(res.code == 0) {
          this.slidesShowList = res.data
        }
        else this.$message({ message: res.message, type: 'info', showClose: true, })
    },
    deleteById(info) {
      this.$confirm('确定删除？', '标题', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback:async (action) => {
          if(action=='confirm') {
            let res = await this.api.post('/admin/deleteSlidesShow',{
              id: info._id
            })
            if(res.code == 0) {
              this.getSlideShowList()
              this.$message({ message: res.message, type: 'success', showClose: true, })
            }
            else this.$message({ message: res.message, type: 'info', showClose: true, })
          }else {
            return false
          }
        }
      });
      
      
    },
  },
}
</script>

<style lang="scss">
#slides-show {
  .avatar-uploader{
    margin: 0 auto; 
    width: 740px;
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      // position: relative;
      overflow: hidden;
      &:hover {
        border-color: #409EFF;
      }
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 740px;
    height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .avatar {
    width: 1100px;
    height: 500px;
  }
  .slidesInfo {
    vertical-align: top;
    height: 100%;
  }
}
</style>